<template>
  <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu active-text-color="#ffd04b" background-color="#ffffff" text-color="#000000"
             router :default-active="activeMenu">
      <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{ subItem.label }}</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  background-color: #ffffff;

  &__logo {
    height: 120px;
    background: url('../assets/eight.jpg') no-repeat center / cover;
  }

  .el-menu {
    border-right: none;
  }
  .icons {
    margin-right: 8px;
    width: 18px;
    height: 20px;
  }
}
</style>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const list = [
  {
    path: "/index",
    label: "首页",
    icon: "Promotion",
    children: [
      {path: "/index",
        label: "母校行活动",
        icon: "Promotion",
      },

      {path: "/first/part",
        label: "具体活动介绍",
        icon: "Promotion",
      },
      {path: "/first/School",
        label: "合作院校",
        icon: "school",},
      {path: "/first/one",
        label: "个人中心",
        icon: "UserFilled",}
    ]
  },
  {
    path: "/user/Batchlist",
    label: "收费细则",
    icon: "Promotion",
    children: [
      {path: "/user/Batchlist",
        label: "我们的价格",
        icon: "UserFilled",
      },
      {path: "/views/cq",
        label: "春秋限定活动",
        icon: "Promotion",
      },
      {path: "/money/vip",
        label: "会员福利",
        icon: "UserFilled",}
    ] // 定义 children 属性
  },
  {
    path: "/user/list",
    label: "母校行活动申请",
    icon: "UserFilled",
    children: [] // 定义 children 属性
  },

  {
    path: "/user/Material",
    label: "活动素材上传",
    icon: "Promotion",
    children: [] // 定义 children 属性
  },
  {
    path: "/views/SummaryReview",
    label: "母校行满意度调查",
    icon: "Promotion",
    children: [] // 定义 children 属性
  },
];

const noChildren = () => {
  return list.filter(item => !item.children || item.children.length === 0)
}
const hasChildren = () => {
  return list.filter(item => item.children && item.children.length > 0)
}
const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>